<?php /* Smarty version 2.6.18, created on 2009-11-19 00:20:03
         compiled from map.tpl */ ?>
<div id="main_content">
	<style type="text/css">
	<?php echo '
	<!--
	.style1 {
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
		font-size: 14px;
	}
	.style2 {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
	}
	-->
	</style>
	
	<style type="text/css">
	<!--
	.style3 {
		font-size: 10px;
		font-family: Arial, Helvetica, sans-serif;
		color: #003366;
	}
	body {
		background-color: #021b45;
	}
	-->
	'; ?>

	</style>
	<!--JQuery -->
	<script type="text/javascript" src="/app/default/www/scripts/jquery-1.3.2.min.js"></script>
	<script type="text/javascript">
	<?php echo '
		var map_location = "/app/default/www/images/map/";
		function showMap() {
			var map_frame = document.getElementById(\'map_placeholder\');
			var fmaSite = document.getElementById(\'fma_site\');
			
			for( i = 0; i < document.mapForm.themeSelected.length; i++ ) {
				if( document.mapForm.themeSelected[i].checked == true ) {
					fmaMap = document.mapForm.themeSelected[i].value;
				}
			}
			 var map_file = fmaSite.value + "_" + fmaMap + ".jpg";
			 map_frame.src = map_location + map_file;			
		}
		
		window.onload = function () {
			$("#map_placeholder").attr(\'src\', "/app/default/www/images/map/fi_admin.jpg");
			$("#imgLoader").hide();
			$("#map_placeholder").show();
		};

	'; ?>

	</script>
	<form id="mapForm" name="mapForm" method="post"  action="">
	<div align="center">
	  <table width="800" border="0" cellpadding="0" cellspacing="0" bgcolor="#28a0e6">
	    <tr>
	      <td><table width="800" border="0" cellspacing="0" cellpadding="0">
	        <tr>
	          <td width="5">&nbsp;</td>
	          <td><table width="790" border="0" cellspacing="0" cellpadding="0">
	            <tr>
	              <td width="648">
	              	<img id="imgLoader" src="/app/default/www/images/map/ajax-loader.gif"/>
	              	<img id="map_placeholder" src="/app/default/www/images/map/ekimo.jpg" width="648" height="534" style="display:none;"/>
	              </td>
	              <td width="5">&nbsp;</td>
	              <td valign="top"><table width="137" border="0" cellspacing="0" cellpadding="0">
	                <tr>
	                  <td>&nbsp;</td>
	                </tr>
	                <tr>
	                  <td>&nbsp;</td>
	                </tr>
	                <tr>
	                  <td><div align="left"><span class="style1">LEGEND</span></div></td>
	                </tr>
	                <tr>
	                  <td><table width="137" border="0" cellspacing="0" cellpadding="0">
	                    <tr>
	                      <td width="37"><img src="/app/default/www/images/map/frame_06.jpg" width="37" height="21" /></td>
	                      <td width="10">&nbsp;</td>
	                      <td><div align="left"><span class="style2">Shoreline</span></div></td>
	                    </tr>
	                    <tr>
	                      <td><img src="/app/default/www/images/map/frame_09.jpg" width="37" height="18" /></td>
	                      <td>&nbsp;</td>
	                      <td><div align="left"><span class="style2">Terrestrial</span></div></td>
	                    </tr>
	                    <tr>
	                      <td><img src="/app/default/www/images/map/frame_12.jpg" width="37" height="16" /></td>
	                      <td>&nbsp;</td>
	                      <td><div align="left"><span class="style2">Reef</span></div></td>
	                    </tr>
	                    <tr>
	                      <td><img src="/app/default/www/images/map/frame_15.jpg" width="37" height="15" /></td>
	                      <td>&nbsp;</td>
	                      <td><div align="left"><span class="style2">Rocks</span></div></td>
	                    </tr>
	                    <tr>
	                      <td><img src="/app/default/www/images/map/frame_18.jpg" width="37" height="17" /></td>
	                      <td>&nbsp;</td>
	                      <td><div align="left"><span class="style2">Sand</span></div></td>
	                    </tr>
	                  </table></td>
	                </tr>
	                <tr>
	                  <td>&nbsp;</td>
	                </tr>
	                <tr>
	                  <td><div align="left"><span class="style1">Thematic Maps</span></div></td>
	                </tr>
	                <tr>
	                  <td align="left">
	                    <label>                      
	                        <select name="fmaSite" size="1" id="fma_site">
	                          <option value="fi" selected="selected">Fishermen's Isl</option>
	                          <option value="k">Kouderika </option>
	                          <option value="r">Roku Village</option>
	                        </select>
	                      </label>
	                    <div align="left"></div>
	                   </td>
	                </tr>
	                <tr>
	                  <td><table width="137" border="0" cellspacing="0" cellpadding="0">
	                    <tr>
	                      <td width="15"><input type="radio" checked="checked" name="themeSelected" id="radio" value="admin" /></td>
	                      <td width="10">&nbsp;</td>
	                      <td width="105"><div align="left"><span class="style2">Administrative</span></div></td>
	                    </tr>
	                    <tr>
	                      <td><input type="radio" name="themeSelected" id="radio7" value="divesites" /></td>
	                      <td>&nbsp;</td>
	                      <td><div align="left"><span class="style2">Dive site points</span></div></td>
	                    </tr>
	                    <tr>
	                      <td><input type="radio" name="themeSelected" id="radio8" value="fish_density" /></td>
	                      <td>&nbsp;</td>
	                      <td><div align="left"><span class="style2">Fish density</span></div></td>
	                    </tr>
	                    <tr>
	                      <td><input type="radio" name="themeSelected" id="radio9" value="inverts" /></td>
	                      <td>&nbsp;</td>
	                      <td><div align="left"><span class="style2">Inverts density</span></div></td>
	                    </tr>
	                    <tr>
	                      <td><input type="radio" name="themeSelected" id="radio10" value="reef_areas" /></td>
	                      <td>&nbsp;</td>
	                      <td><div align="left"><span class="style2">Reef areas</span></div></td>
	                    </tr>
	                    <tr>
	                      <td colspan="3" align="center">
	                      	<input value="Show Map" type="button" name="btnSubmit" onClick="showMap();"/>
						  </td>
	                    </tr>
	                  </table></td>
	                </tr>
	                <tr>
	                  <td>&nbsp;</td>
	                </tr>
	                <tr>
	                  <td>&nbsp;</td>
	                </tr>
	                <tr>
	                  <td>&nbsp;</td>
	                </tr>
	                <tr>
	                  <td>&nbsp;</td>
	                </tr>
	                <tr>
	                  <td>&nbsp;</td>
	                </tr>
	                <tr>
	                  <td><p>&nbsp;</p>
	                    <p>&nbsp;</p>
	                    </td>
	                </tr>
	                <tr>
	                  <td><div align="center"><img src="/app/default/www/images/map/ekimo.jpg" width="118" height="70" /></div></td>
	                </tr>
	              </table></td>
	            </tr>
	          </table></td>
	          <td width="5">&nbsp;</td>
	        </tr>
	      </table></td>
	    </tr>    
	    <tr>
	      <td><div align="left">
	        <table width="800" border="0" cellspacing="0" cellpadding="0">
	          <tr>
	            <td width="5">&nbsp;</td>
	            <td><span class="style3"><strong>| Data Source:</strong>        Digitized Navigational Map by Papua New Guinea Harbours Surveys to 1993 and R.A.N. Surveys to 1994; Scale 1: 37 500 
	      . Global Positioning System (GPS)-surveyed data points by actual EcoEZ RAM Field Surveys</span></td>
	            <td width="142">&nbsp;</td>
	          </tr>
	        </table>
	      </div></td>
	    </tr>
	    <tr>
	      <td bgcolor="#021B45"><img src="/app/default/www/images/map/frame_16.jpg" width="800" height="15" /></td>
	    </tr>
	  </table>
	</div>
	</form> 
	<div id="imgLoadAll" style="display:none;">
		<!--Fishermen's Isl-->
		<img src="/app/default/www/images/map/fi_admin.jpg.jpg" width="648" height="534" />
		<img src="/app/default/www/images/map/fi_divesites.jpg" width="648" height="534" />
		<img src="/app/default/www/images/map/fi_fish_density.jpg" width="648" height="534" />
		<img src="/app/default/www/images/map/fi_inverts.jpg" width="648" height="534" />
		<img src="/app/default/www/images/map/fi_reef_areas.jpg" width="648" height="534" />
		<!--Kouderika-->
		<img src="/app/default/www/images/map/k_admin.jpg" width="648" height="534" />
		<img src="/app/default/www/images/map/k_divesites.jpg" width="648" height="534" />
		<img src="/app/default/www/images/map/k_fish_density.jpg" width="648" height="534" />
		<img src="/app/default/www/images/map/k_inverts.jpg" width="648" height="534" />
		<img src="/app/default/www/images/map/k_reef_areas.jpg" width="648" height="534" />
		<!--Roku Village-->
		<img src="/app/default/www/images/map/r_admin.jpg" width="648" height="534" />
		<img src="/app/default/www/images/map/r_divesites.jpg" width="648" height="534" />
		<img src="/app/default/www/images/map/r_fish_density.jpg" width="648" height="534" />
		<img src="/app/default/www/images/map/r_inverts.jpg" width="648" height="534" />
		<img id="imgLast" src="/app/default/www/images/map/r_reef_areas.jpg" width="648" height="534" />
	</div>
</div>